<template>
  <div class="tag">
    <div v-if="error">{{ error }}</div>
    <div v-if="posts.length" class="layout">
      <PostList :posts="postsWithTag" />
      <TagCloud :posts="posts" />
    </div>
    <div v-else><Spinner /></div>
  </div>
</template>

<script>
import Spinner from '../components/Spinner.vue'
import PostList from '../components/PostList.vue'
import TagCloud from '../components/TagCloud.vue'
import getPosts from '../composables/getPosts'
import { useRoute } from 'vue-router'
import { computed } from 'vue'

export default {
  components: { PostList, Spinner, TagCloud },
  setup() {
    const route = useRoute()
    //grabing the values from composable 'getPosts'
    const {posts, error, load} = getPosts()
    //start the 'fetch'
    load()

    const postsWithTag = computed(() => {
      //If this 'p'(post) contains/includes the tag from route, then we are keeping in
      return posts.value.filter(p => p.tags.includes(route.params.tag))
    })
    return { error, posts, postsWithTag }
  }
}
</script>

<style>
.tag {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}
</style>